<template>
	<scroll-view scroll-y style="background-color: #fff;height: 100vh;font-size: 40rpx;">
		<view style="width: 710rpx;width: 100vw;background-color: #fff;margin-bottom: 15rpx;margin-top: 20rpx;display: flex;flex-direction: column;align-items: center;">
			<view style="border-radius: 24rpx;margin: 10rpx;margin-left: 24rpx;margin-right:24rpx;width: 708rpx;height: 100rpx;display: flex;align-items: center;background-color: #efefef;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<!-- <u-input v-model="form.name"  placeholder='事件名称' v-bind:custom-style="{fontSize:'40rpx'}" /> -->
						<u-field
									v-model="form.name"
									label="课程名"
									style="width: 100%;margin-right: 40rpx;"
									v-bind:custom-style="{fontSize:'40rpx'}"
									input-align="right"
									
								>
						</u-field>
					</view>
					<!-- <view style="width: 710rpx;height: 2rpx;background-color: #c6c6c8;"></view> -->
				</view>
			</view>
			<view style="border-radius: 24rpx;margin: 10rpx;margin-left: 24rpx;margin-right:24rpx;width: 708rpx;height: 100rpx;display: flex;align-items: center;background-color: #efefef;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<!-- <u-input v-model="form.place" style="width: 100%;margin-right: 40rpx;" placeholder='事件描述' v-bind:custom-style="{fontSize:'40rpx'}" /> -->
						<u-field
									v-model="form.place"
									label="教室"
									style="width: 100%;margin-right: 40rpx;"
									v-bind:custom-style="{fontSize:'40rpx'}"
									input-align="right"
									
								>
						</u-field>
					</view>
				</view>
			</view>
			<view style="border-radius: 24rpx;margin: 10rpx;margin-left: 24rpx;margin-right:24rpx;width: 708rpx;height: 100rpx;display: flex;align-items: center;background-color: #efefef;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<!-- <u-input v-model="form.name"  placeholder='事件名称' v-bind:custom-style="{fontSize:'40rpx'}" /> -->
						<u-field
									v-model="form.teacher"
									label="老师"
									style="width: 100%;margin-right: 40rpx;"
									v-bind:custom-style="{fontSize:'40rpx'}"
									input-align="right"
									
								>
						</u-field>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100vw;background-color: #fff;margin-bottom: 15rpx;">
			<view @click="playExpandOrNot" style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 40rpx;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view>时段一</view>
						<view style="">单周 星期一 1-2节</view>
					</view>
				</view>
			</view>
			
			<view :class="expand_or_not" style="width: 750rpx;background-color: #fff;display: flex;justify-content: flex-start;align-items: center;flex-direction: column;">
				<view style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 20rpx;" :key='item'>
					<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
						<view  style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
							<view>时间</view>
							<view style="display: flex;flex-direction: row;">
								<swiper vertical circular style="width: 160rpx;height: 80rpx;font-size: 36rpx;background-color: #eeeeee;border-radius: 20rpx;margin-right: 40rpx;">
									<swiper-item v-for="(item,index) in weekName" :key="index" style="display: flex;justify-content: center;align-items: center;">{{item}}</swiper-item>
								</swiper>
								<swiper vertical circular style="width: 80rpx;height: 80rpx;font-size: 36rpx;background-color: #eeeeee;border-radius: 20rpx;">
									<swiper-item v-for="(item,index) in 12" :key="index" style="display: flex;justify-content: center;align-items: center;">{{item+1}}</swiper-item>
								</swiper>
								<view style="width: 20rpx;height: 72rpx;font-weight: 600;display: flex;justify-content: center;align-items: center;">-</view>
								<swiper vertical circular style="width: 80rpx;height: 80rpx;font-size: 36rpx;background-color: #eeeeee;border-radius: 20rpx;">
									<swiper-item v-for="(item,index) in 12" :key="index" style="display: flex;justify-content: center;align-items: center;">{{item+1}}</swiper-item>
								</swiper>
							</view>
						</view>
					</view>
				</view>
				<view>
					<u-subsection @change="sectionChange" :list="weekList" active-color="#fff" inactive-color="#858488" style="width: 700rpx;"></u-subsection>
					<view style="height: 360rpx;width: 700rpx;background-color: #fff;display: flex;justify-content: flex-start;align-items: center;flex-direction: row;flex-wrap: wrap;">
						<view @click="clickToCheck(index)" v-for="(item,index) in checkList" :key="index" style="height: 90rpx;width: 140rpx;position: relative;display: flex;justify-content: center;align-items: center;">
							<view :class="item.checkStyle" style="height: 80rpx;width: 130rpx;border-radius: 10rpx;position: absolute;z-index: 10;display: flex;justify-content: center;align-items: center;font-size: 30rpx;">{{item.number}}</view>
							<u-icon name="checkmark-circle-fill" size="40" style="position: absolute;z-index: 22;bottom: 10rpx;right: 10rpx;color: #fff;"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- <view @click="show_end = true" style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 40rpx;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view>结束时间</view>
						<view style="margin-right: 40rpx;">{{form.juti[1]}}</view>
					</view>
					<view style="width: 710rpx;height: 2rpx;background-color: #c6c6c8;"></view>
				</view>
			</view> -->
			<!-- <view @click="chooseRepeat" style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 40rpx;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view>重复</view>
						<view style="display: flex;align-items: center;color:grey;margin-right: 30rpx;">{{form.week[0]?"已选择":"不重复"}}
							<u-icon style="margin-left: 10rpx;" name="arrow-right" size="32"></u-icon>
						</view>
					</view>
					<view style="width: 710rpx;height: 2rpx;background-color: #c6c6c8;"></view>
				</view>
			</view> -->
			<!-- <view @click="chooseColor" style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 40rpx;" :key='item'>
				<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view>颜色</view>
						<view style="display: flex;align-items: center;color:grey;margin-right: 30rpx;">
							<view style="width: 32rpx;height: 32rpx;border-radius: 50rpx;" v-bind:style="{backgroundColor:form.color.border_color}"></view>
							<u-icon style="margin-left: 10rpx;" name="arrow-right" size="32"></u-icon>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view :class="play_others_slide" style="width: 100vw;background-color: #fff;">
			<view style="width: 100vw;background-color: #fff;margin-bottom: 15rpx;">
				<view style="width: 710rpx;height: 100rpx;display: flex;align-items: center;padding-left: 20rpx;" :key='item'>
					<view style="width: 100%;height: 100rpx;display: flex;flex-direction: column;">
						<view style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
							<view style="display: flex;justify-content: space-between;align-items: auto;flex-direction: row;width: 200rpx;">
								<u-icon name="minus-circle-fill" size="60" style="color: #e85132;"></u-icon>
								<view>时段二</view>
							</view>
							<view style="">单周 星期二 1-2节</view>
						</view>
						<!-- <view style="width: 710rpx;height: 2rpx;background-color: #c6c6c8;"></view> -->
					</view>
				</view>
			</view>
			<view style="width: 750rpx;background-color: #fff;height: 100rpx;display: flex;justify-content: flex-start;align-items: center;">
				<u-icon name="plus-circle-fill" size="60" style="color: #559af7;padding-left: 20rpx;margin-right: 20rpx;margin-top: 6rpx;"></u-icon>
				<view>添加时段</view>
			</view>
			<button @click="save" style="width: 670rpx;margin-top: 25rpx;background-color: #e9426a;color: #fff;">添加</button>
			<u-calendar min-date='2022-2-20' max-date='2022-8-31' @change='changeDate' v-model="show_calendar"></u-calendar>
			<u-picker mode="time" v-model="show_begin" :params='params' @confirm='confirmBegin'></u-picker>
			<u-picker mode="time" v-model="show_end" :params='params' @confirm='confirmEnd'></u-picker>
		</view>
		
	</scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				url: '',
				event_list: undefined,
				kechengbiao: undefined,
				add_event: undefined,
				event: undefined,
				form: {
					name: '',
					day: '请选择',
					place: '',
					teacher: '',
					week: [],
					juti: ['请选择', '请选择'],
					date: '请选择',
					color: {
						id: 3,
						name: '蓝色',
						border_color: '#51aaf2',
						background_color: '#d6edfb',
						font_color: '#2f6691',
						fill_color: '#59b0f3',
						checked: false
					}
				},
				show_calendar: false,
				show_begin: false,
				show_end: false,
				params: {
					hour: true,
					minute: true,
				},
				checkList:[
					{number:1 ,checkStyle:'check',ifCheck:0},
					{number:2 ,checkStyle:'',ifCheck:0},
					{number:3 ,checkStyle:'check',ifCheck:0},
					{number:4 ,checkStyle:'',ifCheck:0},
					{number:5 ,checkStyle:'check',ifCheck:0},
					{number:6 ,checkStyle:'',ifCheck:0},
					{number:7 ,checkStyle:'check',ifCheck:0},
					{number:8 ,checkStyle:'',ifCheck:0},
					{number:9 ,checkStyle:'check',ifCheck:0},
					{number:10 ,checkStyle:'',ifCheck:0},
					{number:11 ,checkStyle:'check',ifCheck:0},
					{number:12 ,checkStyle:'',ifCheck:0},
					{number:13 ,checkStyle:'check',ifCheck:0},
					{number:14 ,checkStyle:'',ifCheck:0},
					{number:15 ,checkStyle:'check',ifCheck:0},
					{number:16 ,checkStyle:'',ifCheck:0},
					{number:17 ,checkStyle:'check',ifCheck:0},
					{number:18 ,checkStyle:'',ifCheck:0},
					{number:19 ,checkStyle:'check',ifCheck:0},
					{number:20 ,checkStyle:'',ifCheck:0},
				],
				weekList: [
					{name: '单周'}, 
					{name: '双周'}, 
					{name: '全周'},
					{name: '自定义'},
				],
				weekName:['星期一','星期二','星期三','星期四','星期五','星期六','星期天'],
				expand_or_not: 'weekContract',
				week_flag: 0,
				play_others_slide: 'weekOthersContract',
			}
		},
		onUnload() {
			getApp().globalData.color = 0
			getApp().globalData.repeat = 0
		},
		onLoad() {
			// var event = getApp().globalData.event
			// // var event = getApp().globalData.kechengbiao[0]
			// this.event = event
			// this.form.name = event.name
			// this.form.place = event.place
			// this.form.week = event.week
			// this.form.day = event.day
			// this.form.juti = event.juti

			// if (event.date){
			// 	this.form.date = event.date
			// }
			// else{
			// 	var start_date = getApp().globalData.start_date
			// 	var date = new Date(start_date.setDate(start_date.getDate() + event.week[0]*7 + event.day))
			// 	this.form.date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			// }
			// this.form.date = '重复'
		},
		onShow() {
			var repeat = getApp().globalData.repeat
			if (repeat) {
				this.form.week = repeat
			}
			console.log(getApp().globalData.color)
			var color = getApp().globalData.color
			if (color) {
				this.form.color = color
			}
		},
		methods: {
			playExpandOrNot() {
				this.week_flag++;
				if (this.week_flag % 2 != 0) {
					this.expand_or_not = "weekExpand"
					this.play_others_slide = "slide-out-bottom weekOthersExpand"
				}
				else {
					this.expand_or_not = "weekContract"
					this.play_others_slide = "slide-in-bottom"
				}
				if (this.week_flag == 2) {
					this.week_flag = 0;
				}
			},
			sectionChange(index) {
				if(index == 0){
					for(var i = 0;i < this.checkList.length;i++){
						if((i+1) % 2 == 0){
							this.checkList[i].checkStyle = ''
						}
						else{
							this.checkList[i].checkStyle = 'check'
						}
					}
				}
				else if(index == 1){
					for(var i = 0;i < this.checkList.length;i++){
						if((i+1) % 2 == 0){
							this.checkList[i].checkStyle = 'check'
						}
						else{
							this.checkList[i].checkStyle = ''
						}
					}
				}
				else if(index == 2){
					for(var i = 0;i < this.checkList.length;i++){
						this.checkList[i].checkStyle = 'check'
					}
				}
				else if(index == 3){
					for(var i = 0;i < this.checkList.length;i++){
						this.checkList[i].checkStyle = ''
					}
				}
			},
			clickToCheck(index){
				if(this.checkList[index].checkStyle == 'check'){
					this.checkList[index].checkStyle = ''
				}
				else{
					this.checkList[index].checkStyle = 'check'
				}
			},
			changeDate(e) {
				this.form.date = e.result
			},
			confirmBegin(e) {
				this.form.juti[0] = e.hour + ':' + e.minute
			},
			confirmEnd(e) {
				this.form.juti[1] = e.hour + ':' + e.minute
			},
			chooseRepeat() {
				getApp().globalData.repeat = this.form.week
				uni.navigateTo({
					url: 'repeat'
				})
			},
			chooseColor() {
				uni.navigateTo({
					url: 'color'
				})
				getApp().globalData.color = this.form.color
			},
			save() {
				var event = {}
				var add_event = getApp().globalData.add_event
				event.name = this.form.name
				event.date = this.form.date
				event.place = this.form.place
				event.week = this.form.week
				event.day = this.form.day
				event.juti = this.form.juti
				event.color = this.form.color
				event.id = add_event.length

				let start_date = uni.getStorageSync('start_date')
				console.log(start_date)
				let date = new Date(event.date)
				console.log(date)
				let diff = (date - start_date) / (3600 * 24 * 1000)
				console.log(diff)
				
				let oneweek = Math.floor(diff / 7)
				console.log(oneweek)
				if (event.week.indexOf(oneweek) == -1) {
					event.week = event.week.concat(oneweek)
				}
				event.day = date.getDay()
				if (event.day == 0) {
					event.day = 6
				} else {
					event.day = event.day - 1
				}

				add_event = add_event.concat(event)
				console.log(add_event)
				uni.setStorageSync('add_event', add_event)
				getApp().globalData.add_event = add_event

				// #ifdef APP-PLUS
				if (getApp().globalData.platform == 'ios') {
					var UserDefaultsClass = plus.ios.importClass("NSUserDefaults")
					var standardUserDefaults = UserDefaultsClass.standardUserDefaults().initWithSuiteName(
						"group.cyonline.makeabetterworld.cn")
					plus.ios.invoke(standardUserDefaults, "setObject:forKey:", JSON.stringify(getApp().globalData.kechengbiao.concat(
						getApp().globalData.add_event)), 'kechengbiao');
					plus.ios.invoke(standardUserDefaults, "synchronize");
				}
				// #endif

				uni.navigateBack({})
				uni.showToast({
					title: '已保存'
				})
			}
		}
	}
</script>
<style>
	.topic_cont_text {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/

	}
	.check{
		background-color: #559af7;
		color: #fff;
	}
	.weekContract {
		position: absolute;
		z-index: -1;
		/* opacity: 0; */
		pointer-events: none;
	}
	.weekExpand {
		position: absolute;
		z-index: 0;
	}
	
	.weekOthersExpand {
		position: relative;
		z-index: 99;
	}
	.weekOthersContract {
		position: relative;
		z-index: 99;
	}
	
	
	/*向下滑*/
	.slide-out-bottom {
		/* margin-top: -450rpx; */
		animation: slide-out-bottom 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}
	@keyframes slide-out-bottom {
		0% {
			transform: translateY(0);
			opacity: 1;
		}

		100% {
			transform: translateY(528rpx);
			opacity: 1;
		}
	}
	/*向上滑*/
	.slide-in-bottom {
		animation: slide-in-bottom 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}
	
	@keyframes slide-in-bottom {
		0% {
			transform: translateY(518rpx);
			opacity: 1;
		}
	
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
</style>
